<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Diagram Upload Editor</title>
<script src="../new_common/cac.js" type="text/javascript"></script>
<script src="../onedrive_common/ac.js" type="text/javascript"></script>
<script src="../../js/spin/spin.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Sets global environment variables
RESOURCE_BASE = '/resources/dia';
STENCIL_PATH = '/stencils';
SHAPES_PATH = '/shapes';
IMAGE_PATH = '/images';

// Overrides browser language with Confluence user language
var lang = AC.getUrlParam('loc');

// Language is in the Connect URL
if (lang != null)
{
	var dash = lang.indexOf('-');
	
	if (dash >= 0)
	{
		mxLanguage = lang.substring(0, dash);
	}
}
</script>
<script type="text/javascript" src="/js/viewer.min.js"></script>
<script type="text/javascript" src="../vsdx/importer.js"></script>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.9.12/css/aui.min.css" media="all">
<style type="text/css">
body {
	font-family:Arial, sans-serif;
	overflow:hidden;
	height:100%;
	width:100%;
	margin:0;
}
</style>
</head>
<body style="height:100%;">
<div style="height:100%;">
	<div style="height:100%;width:350px;border-right:1px solid #cccccc;position:absolute;top:0px;display:inline-block;">
		<form class="aui top-label" style="height:100%;top:0px;">
			<div class="field-group" style="padding-left:15px;">
				<label for="filename">File name</label> 
				<input type="file" id="fileupload" style="display: none">
				<input class="text macro-param-input" type="text" id="filename" name="filename" disabled placeholder="Choose a file...">
				<button class="aui-button aui-button-primary ap-dialog-submit" id="filePicker">Choose</button>
				<div id="spinner-container"></div>
				<div class="description">Diagram file name</div>
				<div class="error" id="filenameError"></div>
			</div>
			<div class="field-group" style="padding-left:15px;">
				<label for="width">Width</label> <input class="text medium-field" id="width" value="800">
				<div class="description">Width of the viewer (px)</div>
				<div class="error" id="widthError"></div>
			</div>
			<div class="field-group" style="padding-left:15px;">
				<label for="height">Height</label> <input class="text medium-field" id="height" value="600">
				<div class="description">Height of the viewer (px)</div>
				<div class="error" id="heightError"></div>
			</div>
			<div class="field-group" style="padding-left:15px;">
				<input class="checkbox small-field" id="autoSize" type="checkbox" >
				<label for="autoSize" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
			</div>
			<div class="error" id="errorMsg">
			</div>
		</form>
	</div>
	<div id="preview" style="height:100%;left:351px;position:absolute;top:0px;right:0px;display:inline-block;text-align: center;">
		<a style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer"
			onclick="document.getElementById('filename').click();">Choose a file...</a>
	</div>
</div>
<script src="../att_common/att-editor.js" type="text/javascript"></script>
<script type="text/javascript">
  	AttViewerEditor(function(selectedFile, selFileContent, editedFile, width, height, autoSize, isDrawio, aspect, onError)
	{
  		AC.getCurPageId(function(pageId, draftPage)
 		{
			if (selectedFile != null)
			{
				//AP.request doesn't support loading binary data, so we store binary data as Base64 strings (which is loaded using DataURL)
				var attFile = new Blob([selFileContent], {type: selectedFile.type});
				attFile.name = selectedFile.name;
				
				var reqData = {file: attFile, minorEdit: true};
				var draft = draftPage ? '?status=draft' : '';
				 
				AP.request({
					type: 'PUT',
					data: reqData,
					url:  '/rest/api/content/'+ pageId + '/child/attachment' + draft,
					contentType: 'multipart/form-data',
					success: function(resp)
					{
						resp = JSON.parse(resp).results[0];
						
						var macroParams = 
						{
							filename : selectedFile.name,
							attId : resp.id,
							attVer: resp.version.number,
							width : width,
							height : height,
							isDrawio: isDrawio? '1' : '0',
							aspect: aspect,
							mimeType : selectedFile.type,
							autoSize: autoSize? '1' : '0',
							dummy: Date.now() //This allows adding the same file more than once
						};
		
						AP.confluence.saveMacro(macroParams);
						AP.confluence.closeMacroEditor();
					},
					error: onError
				});
			}
			else if (editedFile != null)
			{
				editedFile.width = width;
				editedFile.height = height;
				editedFile.autoSize = autoSize? '1' : '0';
				editedFile.aspect = aspect;
				editedFile.dummy = Date.now(); //This allows adding the same file more than once

				AP.confluence.saveMacro(editedFile);
				AP.confluence.closeMacroEditor();
			}	
		});
	}, function(callback, onError)
	{
		AC.getCurPageId(function(pageId, draftPage)
	   	{
			AP.confluence.getMacroData(function(fileInfo)
			{
				if (fileInfo && fileInfo.attId)
				{
					AP.request({
						url: '/download/attachments/' + pageId + '/' + encodeURIComponent(fileInfo.filename) +
								'?version=' + fileInfo.attVer,
						success: function(resp)
						{
							callback(fileInfo, resp);
						},
						error : function()
						{
							onError(fileInfo);
						}
					});
				}
				else
				{
					callback();
				}
			});
		});
   	});
</script>
</body>
</html>
